import React, { FC, useContext, useMemo, memo, useEffect } from 'react';
import classNames from 'classnames';
import { SelectContext } from './select';


export interface OptionProps {
  children: React.ReactNode
  disable?: Boolean
  value: string
}

export const Option: FC<OptionProps> = memo((props) => {
  const { onSelect, valueArr, lighlightValue } = useContext(SelectContext)
  const { children, disable, value } = props
  const checked = valueArr.find(item => item === value)
  const actived = lighlightValue === value
  const classes = classNames('weiwei-ui-option', {
    'checked': checked,
    'actived': actived,
    'disable': disable
  })
  const onClick = () => {
    if (!disable && onSelect) onSelect(value)
  }
  return (
    <div className={classes} onClick={onClick}>
      {children} {actived ? '激活' : ''} {checked ? '选中' : ''}
    </div>
  )
})

Option.defaultProps = {

};
Option.displayName = 'Option'
export default Option;
